<section class="bg-white dark:bg-slate-800 mb-4 pb-4 rounded-lg">
    <div
      class="bg-white dark:bg-slate-800 shadow-md rounded border border-slate-200 dark:border-slate-700 ctk06"
    >
      <!-- Header -->
      <header class="flex cmgwo cxbmt cb7d8 cvavu">
        <!-- User -->
        <div class="flex cxbmt cb7d8">
          <img
            class="rounded-full c7n6y"
            src="/blog-placeholder-1.jpg"
            width="40"
            height="40"
            alt="User 04"
          />
          <div>
            <div class="cdknc">
              <a
                class="text-sm text-slate-800 dark:text-slate-100 cqosy"
                href="#0">Erica Spriggs</a
              >
            </div>
            <div class="text-slate-500 c0qeg">Yesterday at 2:34 PM</div>
          </div>
        </div>
        <!-- Menu button -->
        <div class="c4ijw">
          <div class="inline-flex csmh2 cke32 cvqv9" x-data="{ open: false }">
            <button
              class="rounded-full czgoy cljes ciz4v coyl7"
              :class="open ? 'c6vqo ce4zx text-slate-500 dark:czgoy': 'czgoy cljes ciz4v coyl7'"
              aria-haspopup="true"
              @click.prevent="open = !open"
              :aria-expanded="open"
              aria-expanded="false"
            >
              <span class="cbl3h">Menu</span>
              <svg class="c3wll chmgx c6dxj" viewBox="0 0 32 32">
                <circle cx="16" cy="16" r="2"></circle>
                <circle cx="10" cy="16" r="2"></circle>
                <circle cx="22" cy="16" r="2"></circle>
              </svg>
            </button>
            <div
              class="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded creyy ct1ew cetne csmh2 c8gb2 cjxbp cke32 c8407 cox8h c5xk8"
              @click.outside="open = false"
              @keydown.escape.window="open = false"
              x-show="open"
              x-transition:enter="c5mjj coq4n ch8aq ccio3"
              x-transition:enter-start="opacity-0 c3pue"
              x-transition:enter-end="cqsra cfwq4"
              x-transition:leave="c5mjj coq4n ch8aq"
              x-transition:leave-start="cqsra"
              x-transition:leave-end="opacity-0"
              style="display: none;"
            >
              <ul>
                <li>
                  <a
                    class="text-sm flex cn6r0 cnz6z ch1ih c6w4h cw92y cjm6w cynm4"
                    href="#0"
                    @click="open = false"
                    @focus="open = true"
                    @focusout="open = false">Option 1</a
                  >
                </li>
                <li>
                  <a
                    class="text-sm flex cn6r0 cnz6z ch1ih c6w4h cw92y cjm6w cynm4"
                    href="#0"
                    @click="open = false"
                    @focus="open = true"
                    @focusout="open = false">Option 2</a
                  >
                </li>
                <li>
                  <a
                    class="text-sm flex cvu65 c6tg6 cw92y cjm6w cynm4"
                    href="#0"
                    @click="open = false"
                    @focus="open = true"
                    @focusout="open = false">Remove</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <!-- Body -->
      <div class="text-sm text-slate-800 dark:text-slate-100 cbfhc cg5st">
        <p>Any book recommendations for a first-time entrepreneur? 📚</p>
      </div>
      <!-- Footer -->
      <footer class="flex items-center cwh9k">
        <!-- Like button -->
        <button class="flex items-center czqrz cynbf ciz4v czgoy">
          <svg class="c3wll c7n6y c1j9y cgmrc cm474" viewBox="0 0 16 16">
            <path
              d="M14.682 2.318A4.485 4.485 0 0011.5 1 4.377 4.377 0 008 2.707 4.383 4.383 0 004.5 1a4.5 4.5 0 00-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 000-6.364zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 014.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 011.785 4.251h-.003z"
            ></path>
          </svg>
          <div class="text-sm text-slate-500 dark:text-slate-400">122</div>
        </button>
        <!-- Share button -->
        <button class="flex items-center czqrz cynbf ciz4v czgoy">
          <svg class="c3wll c7n6y c1j9y cgmrc cm474" viewBox="0 0 16 16">
            <path
              d="M13 7h2v6a1 1 0 0 1-1 1H4v2l-4-3 4-3v2h9V7ZM3 9H1V3a1 1 0 0 1 1-1h10V0l4 3-4 3V4H3v5Z"
            ></path>
          </svg>
          <div class="text-sm text-slate-500 dark:text-slate-400">7</div>
        </button>
        <!-- Replies button -->
        <button class="flex items-center czqrz cynbf ciz4v czgoy">
          <svg class="c3wll c7n6y c1j9y cgmrc cm474" viewBox="0 0 16 16">
            <path
              d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z"
            ></path>
          </svg>
          <div class="text-sm text-slate-500 dark:text-slate-400">298</div>
        </button>
      </footer>
      <!-- Comments -->
      <div class="border-slate-200 dark:border-slate-700 c87xd cggtb czx8a">
        <ul class="cbfhc cvavu">
          <!-- Comment -->
          <li class="rounded cxipc cn1je cmue4">
            <div class="flex cxbmt cb7d8">
              <img
                class="rounded-full c7n6y"
                src="/blog-placeholder-1.jpg"
                width="32"
                height="32"
                alt="User 04"
              />
              <div>
                <div class="text-slate-500 c0qeg">
                  <a
                    class="text-slate-800 dark:text-slate-100 cqosy"
                    href="#0">Sophie Wenner</a
                  > · 44min
                </div>
                <div class="text-sm">
                  <a class="text-indigo-500 cuv1l cdi3j cw92y" href="#0"
                    >@EricaSpriggs</a
                  > Reading through and really enjoying "Zero to Sold" by
                  Arvid.
                </div>
              </div>
            </div>
          </li>
          <!-- Comment -->
          <li class="rounded cxipc cn1je cmue4">
            <div class="flex cxbmt cb7d8">
              <img
                class="rounded-full c7n6y"
                src="/blog-placeholder-1.jpg"
                width="32"
                height="32"
                alt="User 05"
              />
              <div>
                <div class="text-slate-500 c0qeg">
                  <a
                    class="text-slate-800 dark:text-slate-100 cqosy"
                    href="#0">Kyla Scanlon</a
                  > · 1h
                </div>
                <div class="text-sm">
                  Depends on the company you're running, but if I had to
                  choose just one book, it'd be The Personal MBA by Josh
                  Kaufman.
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!-- Comments footer -->
        <div class="flex cmgwo cwkb0">
          <div class="text-sm text-slate-500 dark:text-slate-400">
            <span class="ch1ih c6w4h cw92y">2</span> of <span
              class="ch1ih c6w4h cw92y">67</span
            > comments
          </div>
          <button class="text-sm text-indigo-500 cuv1l cdi3j cw92y"
            >View More Comments</button
          >
        </div>
        <!-- Comment form -->
        <div class="flex items-center cb7d8 cabqp">
          <img
            class="rounded-full c7n6y"
            src="/blog-placeholder-1.jpg"
            width="32"
            height="32"
            alt="User 02"
          />
          <div class="ckut6">
            <label for="comment-form" class="cbl3h">Write a comment…</label>
            <input
              id="comment-form"
              class="cmtl7 c82du c7jg3 cyj9a c3jt4 crafj c6vqo c03gb c3ff8"
              type="text"
              placeholder="Write a comment…"
            />
          </div>
        </div>
      </div>
    </div>

    <form>
      <div
        class="w-full mb-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600"
      >
        <div
          class="flex items-center justify-between px-3 py-2 border-b dark:border-gray-600"
        >
          <div
            class="flex flex-wrap items-center divide-gray-200 sm:divide-x sm:rtl:divide-x-reverse dark:divide-gray-600"
          >
            <div
              class="flex items-center space-x-1 rtl:space-x-reverse sm:pe-4"
            >
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 12 20"
                >
                  <path
                    stroke="currentColor"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M1 6v8a5 5 0 1 0 10 0V4.5a3.5 3.5 0 1 0-7 0V13a2 2 0 0 0 4 0V6"
                  ></path>
                </svg>
                <span class="sr-only">Attach file</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 16 20"
                >
                  <path
                    d="M8 0a7.992 7.992 0 0 0-6.583 12.535 1 1 0 0 0 .12.183l.12.146c.112.145.227.285.326.4l5.245 6.374a1 1 0 0 0 1.545-.003l5.092-6.205c.206-.222.4-.455.578-.7l.127-.155a.934.934 0 0 0 .122-.192A8.001 8.001 0 0 0 8 0Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"
                  ></path>
                </svg>
                <span class="sr-only">Embed map</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 16 20"
                >
                  <path
                    d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
                  ></path>
                  <path
                    d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"
                  ></path>
                </svg>
                <span class="sr-only">Upload image</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 16 20"
                >
                  <path
                    d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"
                  ></path>
                  <path
                    d="M14.067 0H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.933-2ZM6.709 13.809a1 1 0 1 1-1.418 1.409l-2-2.013a1 1 0 0 1 0-1.412l2-2a1 1 0 0 1 1.414 1.414L5.412 12.5l1.297 1.309Zm6-.6-2 2.013a1 1 0 1 1-1.418-1.409l1.3-1.307-1.295-1.295a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1-.001 1.408v.004Z"
                  ></path>
                </svg>
                <span class="sr-only">Format code</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM13.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5 9.5A5.5 5.5 0 0 1 4.6 11h10.81A5.5 5.5 0 0 1 10 15.5Z"
                  ></path>
                </svg>
                <span class="sr-only">Add emoji</span>
              </button>
            </div>
            <div
              class="flex flex-wrap items-center space-x-1 rtl:space-x-reverse sm:ps-4"
            >
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 21 18"
                >
                  <path
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9.5 3h9.563M9.5 9h9.563M9.5 15h9.563M1.5 13a2 2 0 1 1 3.321 1.5L1.5 17h5m-5-15 2-1v6m-2 0h4"
                  ></path>
                </svg>
                <span class="sr-only">Add list</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"
                  ></path>
                </svg>
                <span class="sr-only">Settings</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M18 2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM2 18V7h6.7l.4-.409A4.309 4.309 0 0 1 15.753 7H18v11H2Z"
                  ></path>
                  <path
                    d="M8.139 10.411 5.289 13.3A1 1 0 0 0 5 14v2a1 1 0 0 0 1 1h2a1 1 0 0 0 .7-.288l2.886-2.851-3.447-3.45ZM14 8a2.463 2.463 0 0 0-3.484 0l-.971.983 3.468 3.468.987-.971A2.463 2.463 0 0 0 14 8Z"
                  ></path>
                </svg>
                <span class="sr-only">Timeline</span>
              </button>
              <button
                type="button"
                class="p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
              >
                <svg
                  class="w-4 h-4"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"
                  ></path>
                  <path
                    d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
                  ></path>
                </svg>
                <span class="sr-only">Download</span>
              </button>
            </div>
          </div>
          <button
            type="button"
            data-tooltip-target="tooltip-fullscreen"
            class="p-2 text-gray-500 rounded cursor-pointer sm:ms-auto hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
          >
            <svg
              class="w-4 h-4"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 19 19"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 1h5m0 0v5m0-5-5 5M1.979 6V1H7m0 16.042H1.979V12M18 12v5.042h-5M13 12l5 5M2 1l5 5m0 6-5 5"
              ></path>
            </svg>
            <span class="sr-only">Full screen</span>
          </button>
          <div
            id="tooltip-fullscreen"
            role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
          >
            Show full screen
            <div class="tooltip-arrow" data-popper-arrow></div>
          </div>
        </div>
        <div class="px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800">
          <label for="editor" class="sr-only">Publish post</label>
          <textarea
            id="editor"
            rows="8"
            class="block w-full px-0 text-sm text-gray-800 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
            placeholder="Write an article..."
            required></textarea>
        </div>
        <div
          class="grid justify-end px-4 py-3 border-t border-gray-200 rounded-b-lg bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
        >
          <button
            type="submit"
            class="px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800"
          >
            发送
          </button>
        </div>
      </div>
    </form>
  </section>